<template>
  <view class="box">
    <view class="top">
      <view class="text">
        <span class="skip">跳过</span>
        <span class="top-text ">请选择您当前的状态</span>
        <span class="buttom-text">您的逾期状态</span>
      </view>
      <view class="bottun-list" >
        <view class="bottun" v-for="(value, key, index) in menu" key="index" :class="{ 'last-bottun': index === menu.length - 1 }"> 
          <view class="lower"></view>
          <view class="upper">
            <span class="upper-text">{{ value }}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="mid">
      <view class="mid-text">
        <span class="sum-money">您的逾期金额</span>
      </view>
      <view class="mid-botton-list">
        <view class="mid-button" v-for="(value, key, index) in moneylist" key="index" :class="{ 'last-bottun': index === moneylist.length - 1 || moneylist.length - 2}">
          <view class="lower"></view>
          <view class="upper">
            <span class="upper-text">{{ value }}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="next-button" @click="tocommunity">进入社区</view>
    </view>
  </view>
</template>

<script lang="ts" setup>

const menu = ["信用卡逾期", "网贷逾期", "两者都有"]
const moneylist = ["3万-10万", "10万-30万", "30万-50万", "50万以上"]
const tocommunity = () => {
  uni.navigateTo({
    url:'/pages/info/info'
  })
}

</script>

<style lang="scss" scoped>

.box {
  width: 375px;
  height: 787px;
  background: #fffaec;
  border-radius: 10px 10px 0px 0px;
  
  .lower {
      position: absolute;
      // display: inline-block;
      // top: 20px;
      width: 123px;
      height: 42px;
      background: #f2bb16;
      border-radius: 10px;
      box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    }

  .upper {
      position: relative;
      width: 123px;
      height: 42px;
      // top: -20px;
      bottom: 4px;
      right: 3px;
      background: #fae4a0;
      border-radius: 10px;

      .upper-text {
        position: absolute;
        top: 12px;
        left: 23px;
        width: 83px;
        height: 18px;
        font-size: 16px;
        font-weight: 550;
        color: #000000;
        line-height: 19px;
      }
    }

  .top {
    width: 100%;
    .text {
      position: absolute;
      top: 60px;
      left: 28px;
      width: 320px;
      height: 42px;
      width: 320px;
      height: 42px;
      // background: #000000;
      font-size: 20px;
      // font-family: PingFang SC, PingFang SC-500;
      font-weight: 550;
      text-align: CENTER;
      color: #000000;
      line-height: 23px;
      text-shadow: 0px 4px 4px 0px rgba(0,0,0,0.00); 

      .skip {
        position: absolute;
        bottom: 80px;
        right: -20px;
        // left: 20px;
        width: 99px;
        height: 15px;
        // background: #9f9e9e;
        font-size: 14px;
        font-family: Inter, Inter-400;
        font-weight: 400;
        text-align: CENTER;
        color: #9f9e9e;
        line-height: 18px;
      }

      .top-text {
        display: block;
        padding-bottom: 40px;
      }
      .buttom-text {

      }
    } 

    .bottun-list {
      display: flex;
      flex-wrap: wrap;
      // flex-direction: column;
      // width: 100%;
     
      .bottun {
        position: relative;
        top: 180px;
        margin-left: 46px;
      }
      .last-bottun {
        // top: 100px;
        left: 85px;
        margin-top: 45px;
      }
      
    }
  }

  .mid {
    .mid-text {
      .sum-money {
        position: absolute;
        top: 350px;
        // bottom: 310px;
        left: 28px;
        width: 320px;
        height: 42px;
        width: 320px;
        height: 42px;
        // background: #000000;
        font-size: 20px;
        // font-family: PingFang SC, PingFang SC-500;
        font-weight: 550;
        text-align: CENTER;
        color: #000000;
        line-height: 23px;
        text-shadow: 0px 4px 4px 0px rgba(0,0,0,0.00); 
        }
    }
    .mid-botton-list {
      display: flex;
      flex-wrap: wrap;

      .mid-button {
        position: relative;
        top: 240px;
        margin-left: 46px;
      }
      .last-bottun {
        margin-top: 45px;
      }
    }
  }

  .bottom {
    .next-button {
      margin-top: 300px;
      margin-left: 164rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 410rpx;
      height: 70rpx;
      background: #f2bb16;
      border-radius: 40rpx;
      font-size: 15px;
      color: #ffffff;
      font-weight: 400;
    }
  }
}

</style>